<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Common Modules Source: pointer/PointerEventHandler.js</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	<link type="text/css" rel="stylesheet" href="styles/site.simplex.css">

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html">Common Modules</a>
		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
        </button>
	</div>
	<div class="navbar-collapse collapse" id="topNavigation">
		<ul class="nav navbar-nav">
			
			<li class="dropdown">
				<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="Base.html">Base</a></li><li><a href="Event.html">Event</a></li><li><a href="Html.html">Html</a></li><li><a href="Internal.html">Internal</a></li><li><a href="ol.Overlay.Popup.html">ol.Overlay.Popup</a></li>
				</ul>
			</li>
			
			<li class="dropdown">
				<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="global.html#addClass">addClass</a></li><li><a href="global.html#addListener">addListener</a></li><li><a href="global.html#arrayRemove">arrayRemove</a></li><li><a href="global.html#clear">clear</a></li><li><a href="global.html#create">create</a></li><li><a href="global.html#createHidden">createHidden</a></li><li><a href="global.html#empty">empty</a></li><li><a href="global.html#EventType">EventType</a></li><li><a href="global.html#findListener">findListener</a></li><li><a href="global.html#firstUpperToCase">firstUpperToCase</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getChildByTagName">getChildByTagName</a></li><li><a href="global.html#getClass">getClass</a></li><li><a href="global.html#getDomEventKey">getDomEventKey</a></li><li><a href="global.html#getElementsByClassName">getElementsByClassName</a></li><li><a href="global.html#getListeners">getListeners</a></li><li><a href="global.html#getrandom">getrandom</a></li><li><a href="global.html#getStyle">getStyle</a></li><li><a href="global.html#getuuid">getuuid</a></li><li><a href="global.html#hasClass">hasClass</a></li><li><a href="global.html#isObject">isObject</a></li><li><a href="global.html#isString">isString</a></li><li><a href="global.html#layerConfigDefautls">layerConfigDefautls</a></li><li><a href="global.html#listen">listen</a></li><li><a href="global.html#listenOnce">listenOnce</a></li><li><a href="global.html#logo">logo</a></li><li><a href="global.html#OL_Style_Type">OL_Style_Type</a></li><li><a href="global.html#remove">remove</a></li><li><a href="global.html#removeClass">removeClass</a></li><li><a href="global.html#removeListener">removeListener</a></li><li><a href="global.html#removeListeners">removeListeners</a></li><li><a href="global.html#setClass">setClass</a></li><li><a href="global.html#splitWords">splitWords</a></li><li><a href="global.html#stamp">stamp</a></li><li><a href="global.html#toBack">toBack</a></li><li><a href="global.html#toFront">toFront</a></li><li><a href="global.html#trim">trim</a></li><li><a href="global.html#unListen">unListen</a></li><li><a href="global.html#unlistenAll">unlistenAll</a></li><li><a href="global.html#unListenByKey">unListenByKey</a></li><li><a href="global.html#upperFirstChart">upperFirstChart</a></li>
				</ul>
			</li>
			
		</ul>
        
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
                        <div class="input-group-btn">
                            <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        
	</div>

</div>
</div>


<div class="container" id="toc-content">
<div class="row">

	
	<div class="col-md-12">
	
		<div id="main">
			

		<h1 class="page-title">Source: pointer/PointerEventHandler.js</h1>
    
<section>
    <article>
        <pre
            class="sunlight-highlight-javascript linenums">// Based on https://github.com/Polymer/PointerEvents
import EventTarget from '../events/EventTarget'
import NativeSource from './NativeSource'
import MsSource from './MsSource'
import MouseSource from './MouseSource'
import TouchSource from './TouchSource'
import PointerEvent from './PointerEvent'
import * as Events from '../events/Events'
import {EventType} from '../events/EventType'
class PointerEventHandler extends EventTarget {
  constructor (element) {
    super()

    /**
     * call
     */
    EventTarget.call(this)

    /**
     * element
     */
    this.element_ = element

    /**
     * @const
     * @type {!Object.&lt;string, Event|Object>}
     */
    this.pointerMap = {}

    /**
     * @type {Object.&lt;string, function(Event)>}
     * @private
     */
    this.eventMap_ = {}

    /**
     * @type {Array.&lt;EventSource>}
     * @private
     */
    this.eventSourceList_ = []

    this.registerSources()
  }

  /**
   * Set up the event sources (mouse, touch and native pointers)
   * that generate pointer events.
   */
  registerSources () {
    if ('PointerEvent' in window) {
      this.registerSource('native', (new NativeSource(this)))
    } else if (navigator.msPointerEnabled) {
      this.registerSource('ms', new MsSource(this))
    } else {
      let mouseSource = new MouseSource(this)
      this.registerSource('mouse', mouseSource)
      if ('ontouchstart' in window) {
        this.registerSource('touch', new TouchSource(this, mouseSource))
      }
    }
    // register events on the viewport element
    this.register_()
  }

  /**
   * Add a new event source that will generate pointer events.
   * @param {string} name A name for the event source
   * @param {EventSource} source The source event.
   */
  registerSource (name, source) {
    let s = source
    let newEvents = s.getEvents()
    if (newEvents) {
      newEvents.forEach(function (e) {
        let handler = s.getHandlerForEvent(e)
        if (handler) {
          this.eventMap_[e] = handler.bind(s)
        }
      }, this)
      this.eventSourceList_.push(s)
    }
  }

  /**
   * Set up the events for all registered event sources.
   * @private
   */
  register_ () {
    let l = this.eventSourceList_.length
    let eventSource
    for (let i = 0; i &lt; l; i++) {
      eventSource = this.eventSourceList_[i]
      this.addEvents_(eventSource.getEvents())
    }
  }

  /**
   * Remove all registered events.
   * @private
   */
  unregister_ () {
    let l = this.eventSourceList_.length
    let eventSource
    for (let i = 0; i &lt; l; i++) {
      eventSource = this.eventSourceList_[i]
      this.removeEvents_(eventSource.getEvents())
    }
  }

  /**
   * Calls the right handler for a new event.
   * @private
   * @param {Event} inEvent Browser event.
   */
  eventHandler_ (inEvent) {
    let type = inEvent.type
    let handler = this.eventMap_[type]
    if (handler) {
      handler(inEvent)
    }
  }

  /**
   * Setup listeners for the given events.
   * @private
   * @param {Array.&lt;string>} events List of events.
   */
  addEvents_ (events) {
    events.forEach(function (eventName) {
      Events.listen(this.element_, eventName, this.eventHandler_, this)
    }, this)
  }

  /**
   * Unregister listeners for the given events.
   * @private
   * @param {Array.&lt;string>} events List of events.
   */
  removeEvents_ (events) {
    events.forEach(function (e) {
      Events.unListen(this.element_, e, this.eventHandler_, this)
    }, this)
  }

  /**
   * Returns a snapshot of inEvent, with writable properties.
   * @param event
   * @param inEvent
   * @returns {{}}
   */
  cloneEvent (event, inEvent) {
    let [eventCopy, p] = [{}, null]
    for (var i = 0, ii = PointerEventHandler.CLONE_PROPS.length; i &lt; ii; i++) {
      p = PointerEventHandler.CLONE_PROPS[i][0]
      eventCopy[p] = event[p] || inEvent[p] || PointerEventHandler.CLONE_PROPS[i][1]
    }
    return eventCopy
  }

  /**
   * Triggers a 'pointerdown' event.
   * @param data
   * @param event
   */
  down (data, event) {
    this.fireEvent(EventType.POINTERDOWN, data, event)
  }

  /**
   * Triggers a 'pointermove' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  move (data, event) {
    this.fireEvent(EventType.POINTERMOVE, data, event)
  }

  /**
   * Triggers a 'pointerup' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  up (data, event) {
    this.fireEvent(EventType.POINTERUP, data, event)
  }

  /**
   * Triggers a 'pointerenter' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  enter (data, event) {
    data.bubbles = false
    this.fireEvent(EventType.POINTERENTER, data, event)
  }

  /**
   * Triggers a 'pointerleave' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  leave (data, event) {
    data.bubbles = false
    this.fireEvent(EventType.POINTERLEAVE, data, event)
  }

  /**
   * Triggers a 'pointerover' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  over (data, event) {
    data.bubbles = true
    this.fireEvent(EventType.POINTEROVER, data, event)
  }

  /**
   * Triggers a 'pointerout' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  out (data, event) {
    data.bubbles = true
    this.fireEvent(EventType.POINTEROUT, data, event)
  }

  /**
   * Triggers a 'pointercancel' event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  cancel (data, event) {
    this.fireEvent(EventType.POINTERCANCEL, data, event)
  }

  /**
   * Triggers a combination of 'pointerout' and 'pointerleave' events.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  leaveOut (data, event) {
    this.out(data, event)
    if (!this.contains_(data.target, data.relatedTarget)) {
      this.leave(data, event)
    }
  }

  /**
   * Triggers a combination of 'pointerover' and 'pointerevents' events.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  enterOver (data, event) {
    this.over(data, event)
    if (!this.contains_(data.target, data.relatedTarget)) {
      this.enter(data, event)
    }
  }

  /**
   * @private
   * @param {Element} container The container element.
   * @param {Element} contained The contained element.
   * @return {boolean} Returns true if the container element
   *   contains the other element.
   */
  contains_ (container, contained) {
    if (!container || !contained) {
      return false
    }
    return container.contains(contained)
  }

// EVENT CREATION AND TRACKING
  /**
   * Creates a new Event of type `inType`, based on the information in
   * `data`.
   *
   * @param {string} inType A string representing the type of event to create.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   * @return {PointerEvent} A PointerEvent of type `inType`.
   */
  makeEvent (inType, data, event) {
    return new PointerEvent(inType, event, data)
  }

  /**
   * Make and dispatch an event in one call.
   * @param {string} inType A string representing the type of event.
   * @param {Object} data Pointer event data.
   * @param {Event} event The event.
   */
  fireEvent (inType, data, event) {
    let e = this.makeEvent(inType, data, event)
    this.dispatchEvent(e)
  }

  /**
   * Creates a pointer event from a native pointer event
   * and dispatches this event.
   * @param {Event} event A platform event with a target.
   */
  fireNativeEvent (event) {
    let e = this.makeEvent(event.type, event, event)
    this.dispatchEvent(e)
  }

  /**
   * Wrap a native mouse event into a pointer event.
   * This proxy method is required for the legacy IE support.
   * @param {string} eventType The pointer event type.
   * @param {Event} event The event.
   * @return {PointerEvent} The wrapped event.
   */
  wrapMouseEvent (eventType, event) {
    let pointerEvent = this.makeEvent(eventType, MouseSource.prepareEvent(event, this), event)
    return pointerEvent
  }

  /**
   * @inheritDoc
   */
  disposeInternal () {
    this.unregister_()
    EventTarget.prototype.disposeInternal.call(this)
  }

  /**
   * Properties to copy when cloning an event, with default values.
   * @type {Array.&lt;Array>}
   */
  static CLONE_PROPS = [
    // MouseEvent
    ['bubbles', false],
    ['cancelable', false],
    ['view', null],
    ['detail', null],
    ['screenX', 0],
    ['screenY', 0],
    ['clientX', 0],
    ['clientY', 0],
    ['ctrlKey', false],
    ['altKey', false],
    ['shiftKey', false],
    ['metaKey', false],
    ['button', 0],
    ['relatedTarget', null],
    // DOM Level 3
    ['buttons', 0],
    // PointerEvent
    ['pointerId', 0],
    ['width', 0],
    ['height', 0],
    ['pressure', 0],
    ['tiltX', 0],
    ['tiltY', 0],
    ['pointerType', ''],
    ['hwTimestamp', 0],
    ['isPrimary', false],
    // event instance
    ['type', ''],
    ['target', null],
    ['currentTarget', null],
    ['which', 0]
  ]
}

export default PointerEventHandler
</pre>
    </article>
</section>





		</div>
	</div>

	<div class="clearfix"></div>

	

</div>
</div>


    <div class="modal fade" id="searchResults">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Search results</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>


<footer>


	<span class="copyright">
	https://lzw.me.
	</span>

<span class="jsdoc-message">
	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
	
		on Sun Aug 12th 2018
	
	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>

<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>

    <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>


<script>
$( function () {
	$( "[id*='$']" ).each( function () {
		var $this = $( this );

		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
	} );

	$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
		var $this = $( this );

		var example = $this.find( "code" );
		exampleText = example.html();
		var lang = /{@lang (.*?)}/.exec( exampleText );
		if ( lang && lang[1] ) {
			exampleText = exampleText.replace( lang[0], "" );
			example.html( exampleText );
			lang = lang[1];
		} else {
			var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
			lang = langClassMatch ? langClassMatch[1] : "javascript";
		}

		if ( lang ) {

			$this
			.addClass( "sunlight-highlight-" + lang )
			.addClass( "linenums" )
			.html( example.html() );

		}
	} );

	Sunlight.highlightAll( {
		lineNumbers : true,
		showMenu : true,
		enableDoclinks : true
	} );

	$.catchAnchorLinks( {
        navbarOffset: 10
	} );
	$( "#toc" ).toc( {
		anchorName  : function ( i, heading, prefix ) {
			return $( heading ).attr( "id" ) || ( prefix + i );
		},
		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
		showAndHide : false,
		smoothScrolling: true
	} );

	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
	$( '.dropdown-toggle' ).dropdown();

    $( "table" ).each( function () {
      var $this = $( this );
      $this.addClass('table');
    } );

} );
</script>



<!--Navigation and Symbol Display-->


<!--Google Analytics-->



    <script type="text/javascript">
        $(document).ready(function() {
            SearcherDisplay.init();
        });
    </script>


</body>
</html>
